Vuetify: DataTable - kidooom's Scrapbox

Vuetify: DataTable

Vuetify公式：https://vuetifyjs.com/ja/components/data-tables/

以下のようなテーブル機能を提供する

https://gyazo.com/b242ec3a2fe87ca51c8310c9fccaac1f

ソートや検索、ページング機能がデフォルトで提供されていて便利

色々試してみる

最初から id の降順でソート済みの状態にする

code:vue

<v-data-table

:headers="headers"

:items="items"

:sort-by="'id'"

:sort-desc="true"

sort-byでソート対象、sort-descで降順かどうかを指定する

最初から全件表示させる

デフォルトだと10件ずつ表示になるので、footer-propsの itemsPerPageOptions の 0番目に -1 を設定しておく

code:vue

<v-data-table

:headers="headers"

:items="items"

:footer-props="{

showFirstLastPage: true,

itemsPerPageOptions: -1, 10, 20, 50, 100,

}"

一部の項目だけ装飾をする

装飾対象の項目が id だとすると、

code:vue

<v-data-table

:headers="headers"

:items="items"

:search="search"

<template #item.id="{ item }">

id は {{ item.id }} です

</template>

</v-data-table>